<template>
  <div class="plugin-client-classify left-box" style="padding-right: 20px">
    <t-menu class="menu" theme="light" v-model="classifyStore.index.value" width="250px" @change="clientStore.reset(1)" :collapsed="collapsed">
      <t-menu-item value="all">
        <template #icon>
          <t-icon name="app" />
        </template>
        {{ plugin.t('classify.all') }}
      </t-menu-item>
      <t-menu-item :value="0">
        <template #icon>
          <t-icon name="layers" />
        </template>
        {{ plugin.t('classify.no') }}
      </t-menu-item>
      <t-menu-item v-for="item in classifyStore.getList()" :value="item.id">
        <template #icon>
          <t-icon name="folder" />
        </template>
        {{ item.name }}
      </t-menu-item>
    </t-menu>
    <div class="tools" v-if="!collapsed">
      <t-button shape="square" theme="default" @click="collapsed = true">
        <template #icon>
          <t-icon name="view-column" />
        </template>
      </t-button>
      <template v-if="classifyStore.getIndex() > 0">
        <t-button class="animate__animated animate__fadeInRight animate__faster" shape="square" theme="default" @click="form.open(classifyStore.getIndexData())">
          <template #icon>
            <t-icon name="edit" />
          </template>
        </t-button>
        <t-popconfirm 
          theme="warning" 
          :content="$t('message.confirm.delete')" 
          @confirm="onDelete"
        >
          <t-button class="animate__animated animate__fadeInRight animate__faster" shape="square" theme="default">
            <template #icon>
              <t-icon name="delete" />
            </template>
          </t-button>
        </t-popconfirm>
      </template>
      <t-button v-else class="animate__animated animate__fadeInRight animate__faster" shape="square" theme="default" @click="form.open({})">
        <template #icon>
          <t-icon name="add" />
        </template>
      </t-button>
    </div>
    <div class="tools" v-else>
      <t-button shape="square" theme="default" @click="collapsed = false">
        <template #icon>
          <t-icon name="view-list" />
        </template>
      </t-button>
    </div>
  </div>
  <Form ref="form" />
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import classifyStore from '../../store/classify'
  import clientStore from '../../store'
  import Form from './form.vue'

  const plugin = index.plugin
  const form = ref(null)
  const collapsed = ref(true)

  // 删除
  const onDelete = () => {
    classifyStore.del(classifyStore.getIndex()).then(res => {
      app.message('success', 'message.' +  res.message)
      // 重新请求
      clientStore.reset(1)
    }).catch(res => {
      app.message('error', 'message.error.' + res.message)
    })
  }

  // 加载
  classifyStore.get()
</script>
<style lang="scss">
  .plugin-client-classify{
    .menu{
      background: 0;
      .t-default-menu__inner .t-menu{
        padding: 0
      }
      .t-menu__item.t-is-active:not(.t-is-opened){
        background-color: var(--td-brand-color-2)
      }
    }

    .tools{
      padding: 30px 0;
      text-align: center;

      button{
        margin: 0 5px;
      }
    }
  }
</style>